<template>
  <view>
    <view class="" style="margin: 22rpx 28rpx; background: #fff; border-radius: 20rpx">
      <view class="" v-for="(i, k) in list" :key="k" style="display: flex; align-items: center; padding: 30rpx" @tap="radio = k">
        <radio :checked="radio == k" color="#E50014" style="transform: scale(0.7)"></radio>
        <view class="" style="font-size: 28rpx; width: 400rpx; padding-left: 10rpx">
          {{ i.reason }}
        </view>
      </view>
      <view class="btn" @tap="sub">提交</view>
      <view class="" style="height: 1rpx"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radio: 0,
      list: [],
      id: null
    };
  },
  methods: {
    yuan() {
      this.api({
        url: '/api//shop/cancelReason',
        method: 'post'
      }).then((res) => {
        this.list = res.data;
      });
    },
    sub() {
      this.api({
        url: '/api//shop/orderStatus',
        method: 'post',
        data: {
          order_id: this.id,
          type: 1,
          cancel_reason: this.list[this.radio].reason
        }
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      });
    }
  },
  onShow() {
    this.yuan();
  },
  onLoad(op) {
    this.id = op.id;
  }
};
</script>

<style>
page {
  background: #f8f8f8;
}
.btn {
  /* width: 520px;*/
  height: 80rpx;
  background: linear-gradient(180deg, #e50014, #ff6572);
  border-radius: 40rpx;
  margin: 63rpx 80rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 32rpx;
  color: #fff;
}
</style>
